<template>
  <div>
    <el-card>
      <el-row>
        <el-col align="right">
          <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model.lazy="searchvalue"
                        clearable
                        @input="bindInput"
                        :placeholder="$t('searchPlaceholder')" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getList"  icon="el-icon-search" type="primary">
                {{ $t('tableBtn.search') }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="add" icon="el-icon-circle-plus-outline"
                         type="success">
                {{ $t('tableBtn.add') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          border
          tooltip-effect="dark"
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="name"
            :label="$t('Employee.a')"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="jobName"
            align="center"
            width="150"
            show-overflow-tooltip
            :label="$t('Employee.b')">
        </el-table-column>
        <el-table-column
            prop="companyName"
            align="center"
            show-overflow-tooltip
            :label="$t('Employee.c')">
        </el-table-column>
        <el-table-column
            prop="departmentName"
            align="center"
            width="100"
            :label="$t('Employee.d')">
        </el-table-column>
        <el-table-column
            prop="telephone"
            align="center"
            :label="$t('Employee.e')">
        </el-table-column>
        <el-table-column
            prop="status"
            align="center"
            width="80"
            :label="$t('Employee.f')">
        </el-table-column>
        <el-table-column
            align="center"
            :label="$t('Employee.g')">
          <template slot-scope="{ row }">
            <el-button @click="bianji(row)" type="primary" size="mini">
              {{ $t('tableBtn.edit') }}
            </el-button>
            <el-button @click="del(row.id)" type="danger" size="mini">
              {{ $t('tableBtn.del') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col align="right">
        <el-row style="margin: 15px">
          <el-pagination
              background
              @current-change="currentChange"
              :current-page="page"
              :page-size="10"
              layout="total,prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-row>
      </el-col>
    </el-card>
    <el-dialog @close="dialogClose" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-form-item label="员工名称" prop="name" label-width="100px">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码" prop="telephone" label-width="100px">
          <el-input v-model="form.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password" label-width="100px">
          <el-input readonly v-model="form.password" autocomplete="off" />
          <el-button v-show="!form.password" @click="getPassword" type="primary" size="mini">
            生成登录密码
          </el-button>
        </el-form-item>
        <el-form-item label="所属公司" prop="companyId" label-width="100px">
          <el-select @change="changeCompany" v-model="form.companyId" placeholder="请选择">
            <el-option
                v-for="item in company"
                :key="item.id"
                :label="`${item.name}--id${item.id}`"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="departId" label-width="100px">
          <el-select @change="departChange" v-model="form.departId" placeholder="请选择">
            <el-option
                v-for="item in depart"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在职位" prop="jobId" label-width="100px">
          <el-select v-model="form.jobId" placeholder="请选择">
            <el-option
                v-for="item in job"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addEmployee, delEmployee, getEmployee, getPass,modifyEmployee} from "../../api/employee";
import {deepClone, phoneRule, requiredRule} from "../../uilts";
import {getCompany, getCompanyView, getJobView} from "../../api";

const getDefaultForm = () => ({
  "companyId": '', // 公司id
  "departId":'', // 部门id
  "jobId":'',  // 职位id
  "name": '', // 员工姓名
  "password": '', // 密码
  "status": 1,
  "telephone": "", //号码
  "headpic":""
})

export default {
  data() {
    return {
      list:[],
      searchvalue:"", // 用来绑定用户输入的关键字
      page:1, // 当前页码
      total:0,// 总条数
      dialogFormVisible:false,
      form:getDefaultForm(),
      rules:{
        "companyId": requiredRule(), // 公司id
        "departId": requiredRule(), // 部门id
        "jobId":requiredRule(),  // 职位id
        "name": requiredRule(), // 员工姓名
        "password": requiredRule(), // 密码
        "status": 1,
        "telephone":phoneRule(), //号码
        "headpic":requiredRule()
      },
      company:[],
      depart:[],
      job:[],
      isbianji:false
    }
  },
  created() {
    this.getList()
    this.formInitOptions()
  },
  methods: {
    // 加载数据函数
    getList(){
      getEmployee({
        name:this.searchvalue,
        page:this.page
      }).then(res=>{
        this.list = res.list
        this.total = res.total
        this.page = res.pageNum
      })
    },
    // 初始化表单选项下啦参数
    async formInitOptions(){
      const cp = await getCompany({
        limit:10000
      })
      this.company = cp.list
    },
    // 分页切换
    currentChange(ps){
      this.page = ps
      this.getList()
    },
    bindInput(){
      if (this.searchvalue===''){
        this.getList()
      }
    },
    add(){
      this.dialogFormVisible = true
      this.isbianji = false
    },
    // 关闭表达清空
    dialogClose(){
      this.form = getDefaultForm()
      this.$refs.form.resetFields()
    },
    // 选择公司获取公司部门
    async changeCompany(v){
      this.form.departId = ''
      this.form.jobId = ''
      this.depart = await getCompanyView(v)
    },
    // 编辑
    async bianji(row){
      this.isbianji = true
      this.form = deepClone(row)
      await this.changeCompany(row.companyId)
      this.dialogFormVisible = true
    },
    // 提交
    submit(){
      this.$refs.form.validate(async pass=>{
        if (pass){
          if (this.isbianji){
            await modifyEmployee(this.form)
          }else {
            await addEmployee(this.form)
          }
          this.dialogFormVisible = false
          this.getList()
          this.$message.success('操作成功！')

        }
      })
    },
    //获取随机密码
    async getPassword(){
      this.form.password = await getPass()
    },
    // 选择部门获取职位
    async departChange(v){
      this.form.jobId = ''
      this.job = await getJobView(v)
    },
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delEmployee(id)
        this.$message.success('删除成功！！！')
        await this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  }
}
</script>

<style scoped>

</style>
